<!--
 * @Author: chenhaoran
 * @Date: 2025-04-05 14:08:01
 * @LastEditors: chenhaoran
 * @LastEditTime: 2025-04-06 22:27:06
-->
<template>
  <div class="flow-groups">
    <template v-for="(item,index) in flowGroupArr" :key="index">
      <!-- 分割线 -->
      <div class="flow-group-splitline">
        <div class="flow-group-splitline__button">
          <el-icon :size="20" class="stage-add-btn">
            <CirclePlusFilled />
          </el-icon>
        </div>
      </div>

      <div class="flow-group flow-group-editable flow-group--capsule">
        <div class="group-head">
          <div class="group-head-title">{{ item.stageName }}</div>
        </div>
        <div class="stages">
          <div
            v-for="(stageItem,stageIndex) in item.stageItem"
            :key="stageIndex"
            class="stage-container stage-container--capsule"
          >
            <div class="tasks-container">
              <div class="flow-job flow-job-driven"></div>
              <div
                v-for="(child,childIndex) in stageItem.children"
                class="flow-job flow-job-capsule flow-job-capsule--unactive flow-job-capsule--success"
              >
                <div class="flow-job__extra flow-job__extra--pre">
                  <el-button class="next-btn next-btn-text isOnlyIcon" circle>
                    <el-icon :size="20">
                      <CirclePlusFilled />
                    </el-icon>
                  </el-button>
                </div>
                <div class="flow-job__content">
                  <div class="component-name">{{ child.name }}</div>
                </div>
                <div class="flow-job__extra flow-job__extra--next">
                  <el-button class="next-btn next-btn-text isOnlyIcon" circle>
                    <el-icon :size="20">
                      <CirclePlusFilled />
                    </el-icon>
                  </el-button>
                </div>
              </div>
              <div
                class="flow-job flow-job-capsule flow-job-capsule--unactive flow-job-capsule--success"
              >
                <div class="flow-job__extra flow-job__extra--pre"></div>
              </div>
            </div>
          </div>
          <!-- 添加并行任务 -->
          <div :class="['stage-container', 'add-stage-container', isHovered ? 'hover' : '']">
            <div class="tasks-container" style="padding-left: 32px;">
              <div
                class="flow-job flow-job__plusbtn"
                @mouseover="isHovered = true"
                @mouseleave="isHovered = false"
              >
                <div class="flow-job__plusbtn__content">
                  <el-icon :size="20" class="parallel-add-btn">
                    <CirclePlusFilled />
                  </el-icon>
                  <div class="component-name parallel-tasks">并行任务</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { CirclePlusFilled } from "@element-plus/icons-vue";
const flowGroupArr = ref([{
  id: 1,
  stageName: '测试',
  stageItem: [{
    children: [{
      name: 'Java 代码扫描'
    }],
  }, {
    children: [{
      name: 'Maven 单元测试'
    }],
  }, {
    children: [{
      name: 'Android 单元测试'
    }]
  }]
}, {
  id: 2,
  stageName: '代码扫描',
  stageItem: [{
    children: [{
      name: 'Java 代码扫描'
    }, {
      name: '源码漏洞检测'
    }, {
      name: 'CCC扫描'
    }],
  }, {
    children: [{
      name: 'JavaScipt 代码扫描'
    }],
  }, {
    children: [{
      name: 'CCC扫描'
    }],
  }, {
    children: [{
      name: 'Python 依赖安全扫描'
    }],
  }]
}])
const isHovered = ref(false)
</script>
<style lang="scss" scoped>
.flow-groups {
  height: 100%;
  position: relative;
  white-space: nowrap;
  .flow-group-splitline {
    display: inline-block;
    height: 100%;
    padding: 0 1px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    vertical-align: top;
    width: 48px;
    display: inline-block;
    height: 100%;
    padding: 0 1px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    vertical-align: top;
    width: 48px;
    &__button {
      color: #8b8b8b;
      cursor: pointer;
      height: 100%;
      position: relative;
      z-index: 1;
      &::before {
        border-left: 1px solid #dbdbdb;
        content: "";
        height: 100%;
        position: absolute;
      }
      .stage-add-btn {
        color: #595959;
        margin-left: -10px;
        position: absolute;
        top: 92px;
        z-index: 2;
        &:hover {
          color: #1b9aee;
        }
      }
    }
  }
  .flow-group {
    display: inline-block;
    height: 100%;
    overflow-y: auto;
    padding-top: 19px;
    vertical-align: top;
    .add-stage-container {
      display: none;
    }
    &:hover {
      .add-stage-container {
        display: flex;
        opacity: 1;
      }
      .stage-container:last-child:before {
        border-radius: 0 0 16px 16px;
      }
      .stage-container:nth-last-child(2):before {
        border-radius: 0;
      }
    }
    .group-head {
      margin-bottom: 38px;
      padding: 0 20px;
    }
    .stage-container {
      position: relative;
      &.hover::before {
        border-color: #1b9aee;
      }
      &:first-child:before {
        border-left: none;
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
        border-right: none;
      }
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: -50%;
        width: 100%;
        height: 100%;
        border-bottom: 1px solid #dbdbdb;
        border-left: 1px solid #dbdbdb;
        border-right: 1px solid #dbdbdb;
        // -webkit-transition: border 0.2s ease-in;
        // transition: border 0.2s ease-in;
      }
      &:nth-last-child(2):before {
        -webkit-border-radius: 0 0 16px 16px;
        border-radius: 0 0 16px 16px;
      }
    }
    // .flow-group--capsule .stage-container {
    //   &::before {
    //     content: "";
    //     position: absolute;
    //     left: 0;
    //     top: -50%;
    //     width: 100%;
    //     height: 100%;
    //     border-bottom: 1px solid #d70e0e;
    //     border-left: 1px solid #dbdbdb;
    //     border-right: 1px solid #dbdbdb;
    //     // -webkit-transition: border 0.2s ease-in;
    //     // transition: border 0.2s ease-in;
    //   }
    // }
    .tasks-container {
      display: flex;
      margin: 0 14px;
    }
    .flow-job {
      -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-align-items: center;
      align-items: center;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: center;
      justify-content: center;
      margin: 10px 0;
      position: relative;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      z-index: 1;
      &:hover {
        z-index: 2;
        .flow-job__extra {
          margin-top: -1px;
          opacity: 1;
          &::before {
            border-top: 1px solid #1b9aee;
            content: "";
            margin-top: -1px;
            position: absolute;
            top: 50%;
            width: 16px;
          }
        }
        .flow-job__content {
          border-color: #1b9aee;
        }
      }
    }
    .flow-job-capsule {
      margin: 10px -5px;
      &:last-child {
        margin-right: 0;
      }
    }
    .flow-job__extra {
      opacity: 0;
      width: 20px;
    }
    .flow-job__extra--pre {
      margin-right: 14px;
      &::before {
        left: 18px;
      }
    }
    .next-btn {
      min-width: 20px !important;
      -webkit-transform: translate(-3px, -1px);
      transform: translate(-3px, -1px);
      &::before {
        display: inline-block;
        vertical-align: middle;
        content: "";
        height: 100%;
        width: 0;
      }
    }
    .next-btn.isOnlyIcon {
      width: 32px;
      height: 32px;
      padding: 0;
    }
    .next-btn-text {
      border-radius: 0;
      padding: 0;
      height: 20px;
      font-size: 14px;
      border-width: 0;
      background: transparent;
      border-color: transparent;
    }
    .flow-job__content {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: 1px solid #e9edf0;
      border-radius: 20px;
      cursor: pointer;
      height: 40px;
      // -webkit-box-shadow: 0 2px 4px 0 rgba(38, 38, 38, .1);
      box-shadow: 0 2px 4px 0 rgba(38, 38, 38, 0.1);
      min-width: 130px;
      padding: 0 12px;
    }
    .component-name {
      color: #292929;
      display: inline-block;
      vertical-align: middle;
    }
    .flow-job__extra--next {
      margin-left: 14px;
      &::before {
        right: 18px;
      }
      .next-btn {
        transform: translate(-8px, -1px);
      }
    }
    .flow-job__plusbtn {
      background: #f2f5f7;
      border: 1px solid #adadad;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      box-shadow: 0 2px 4px 0 rgba(38, 38, 38, 0.1);
      cursor: pointer;
      height: 40px;
      text-align: center;
      width: 127px;
      &:hover {
        background: #fff;
        border: 1px solid #1b9aee;
        .parallel-add-btn {
          color: #1b9aee;
        }
      }
    }
    .flow-job__plusbtn__content {
      padding: 0 12px;
    }
    .parallel-tasks {
      margin-left: 4px;
    }
  }
}
</style>